<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>总结Vue数据监测</title>
    <!-- 引入Vue.js -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>学生信息</h1>

      <button @click="age++">年龄+1</button>
      <button @click="addSex">添加性别属性，默认值为：男</button>
      <button @click="student.sex='女'">修改性别</button>
      <button @click="addFriend">在列表首位添加一个朋友</button>
      <button @click="updataFirstFriendName">
        修改第一个朋友的名字为：张三
      </button>
      <button @click="addHobby">添加一个爱好</button>
      <button @click="changeHobby">修改第一个爱好为：开车</button>
      <button @click="removeSmoke">过滤掉爱好中的抽烟</button>

      <h3>姓名:{{student.name}}</h3>
      <h3>年龄:{{student.age}}</h3>
      <h3 v-show="student.sex">性别:{{student.sex}}</h3>
      <h3>爱好:</h3>
      <ul>
        <li v-for="(h,index) of student.hobby" :key="index">{{h}}</li>
      </ul>
      <h3>朋友:</h3>
      <ul>
        <li v-for="(f,index) of student.friends" :key="index">
          {{f.name}}--{{f.age}}
        </li>
      </ul>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#root",
      data() {
        return {
          student: {
            name: "tom",
            age: "18",
            hobby: ["抽烟", "喝酒", "烫头"],
            friends: [
              { name: "jerry", age: 20 },
              { name: "tony", age: 36 },
            ],
          },
        };
      },
      methods: {
        addSex() {
          // 动态添加属性,并实现被监测
          // Vue.set(vm.student, "sex", "男");
          vm.$set(this.student, "sex", "男"); // this === vm
        },
        addFriend() {
          // 数组中的每个元素没有getter和setter方法,因此无法被监测到
          // 对数组进行操作时需要使用数组方法,才能被检测到进行页面个性,
          // 且数组内部的对象属性也能被监测到
          this.student.friends.unshift({ name: "xx", age: 20 });
        },
        updataFirstFriendName() {
          // 对数组元素内部的对象可以直接进行修改,对象中的每个属性都有getter和setter方法
          this.student.friends[0].name = "张三";
        },
        addHobby() {
          this.student.hobby.push("学习");
        },
        changeHobby() {
          this.student.hobby.splice(0, 1, "开车");
          // Vue.set(this.student.hobby, 0, "开车");
          // this.$set(this.student.hobby, 0, "开车");
        },
        removeSmoke() {
          // 由Vue所管理的函数最好写为普通函数,不是Vue管理的函数最好写为箭头函数
          this.student.hobby = this.student.hobby.filter((h) => { 
            // filter返回过滤后的数组,不改变原数组
            return h !== "抽烟"; // rertuen后跟过滤条件
          });
        },
      },
    });
  </script>
</html>
